<template>
  <div key="collection">
    <h1><van-icon color="red" name="star" /> <span>我的收藏</span></h1>
    <template v-if="collList">
      <ul v-if="collList.length > 0">
        <li v-for="l in collList" :key="l.id">
          <div class="box">
            <router-link :to="`/detail/${l.id}`">
              <div class="img"><van-image fit="cover" :src="l.image" /></div>
            </router-link>
            <div class="right">
              <p>{{ l.store_name }}</p>
              <div class="bottom">
                <span class="num">￥{{ l.price }}</span>
                <span class="del" @click.stop="del(l.pid)">删除</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </template>

    <template v-if="collList">
      <div v-if="collList.length == 0">
        <van-image
          src="http://47.115.51.185/h5/img/noCollection.46d9f620.png"
          alt=""
        />
        <ForYou :item="tuijianList" />
      </div>
    </template>
  </div>
</template>

<script>
// import { Toast } from "vant";
import ForYou from "@/components/ForYou";
import { Toast } from "vant";
export default {
  data() {
    return {
      collList: [],
      tuijianList: []
    };
  },
  components: {
    ForYou
  },
  created() {
    this.$axios.get("/api/product/hot?page=1&limit=20").then(d => {
      this.tuijianList = d.data.data;
    });

    this.$axios.get("api/collect/user?page=1&limit=20").then(d => {
      console.log(d);
      this.collList = d.data.data;
    });
  },
  mounted() {},
  methods: {
    del(id) {
      this.axios({
        method: "post",
        url: "api/collect/del",
        data: {
          category: "product",
          id: id
        }
      }).then(() => {
        this.$axios.get("api/collect/user?page=1&limit=20").then(d => {
          this.collList = d.data.data;
          Toast.success("删除成功");
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
h1 {
  font-size: 0.4rem;
  font-weight: bold;
  margin: 10px 0;
  .van-icon {
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
  }
}
li {
  margin: 10px 0;
  padding: 10px 15px;
  background: white;

  .box {
    display: flex;
    justify-content: flex-start;

    .img {
      width: 2.5rem;
      height: 2.5rem;
      margin-right: 0.3rem;
      .van-image {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
      }
    }
    .right {
      flex: 1;
      p {
        font-size: 0.35rem;
        font-weight: bold;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        color: rgb(31, 31, 31);
      }
      .bottom {
        margin-top: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .num {
          font-size: 0.35rem;
          color: rgb(252, 65, 65);
        }
      }
      .del {
        border: rgb(150, 150, 150) 1px solid;
        display: inline-block;
        padding: 4px;
        font-size: 0.3rem;
        color: rgb(31, 31, 31);
        z-index: 2;
      }
    }
  }
}
</style>
